<template>
	<view class="hintConten" v-if="onOff==true">
		<view class="keepOut" @click="close"></view>
		<view class="keepOutCont">
			<view class="keepOutContTop">
				<text>您还未登录</text>
				<u-icon name="close" color="#999" size="26" @click="close"></u-icon>
			</view>
			<view class="keepOutContTitle">
				登录后可查看更多内容
			</view>
			<view class="keepOutContImg">
				<image src="https://www.atuanjian.com/appletStatic/static/huojian.png" mode=""></image>
			</view>
			<view class="keepOutContBottom">
				<view class="keepButtom" @click="close">
					取消
				</view>
				<navigator class="keepButtom" url="#">登录</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onOff: true
			}
		},
		methods: {
			open() {
				this.onOff = true
			},
			close() {
				this.onOff = false
			}

		},
		
	}
</script>

<style lang="less">
	.hintConten {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.keepOut {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 888;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.keepOutCont {
		width: 70%;
		position: absolute;
		top: 15%;
		padding: 30rpx 10rpx 50rpx 0;
		left: 20%;
		z-index: 999;
		text-align: center;
		background-color: #fff;
	}

	.keepOutContTop {
		font-size: 36rpx;
		color: #333;
		position: relative;

	}

	.keepOutContTop>.u-icon {
		position: absolute;
		top: -20rpx;
		right: 10rpx;
		font-size: 26rpx;
	}

	.keepOutContTitle {
		font-size: 32rpx;
		color: #999;
		margin-top: 30rpx;
	}

	.keepOutContImg {
		width: 60%;
		height: 250rpx;
		margin: 40rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.keepOutContBottom {
		display: flex;
		justify-content: space-around;

		.keepButtom {
			width: 180rpx;
			height: 70rpx;
			border-radius: 30rpx;
			line-height: 70rpx;
			font-size: 30rpx;
		}

		view {

			background-color: #eeeeee;
			color: #333333;
			border: 2rpx solid #999;
		}

		navigator {

			background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
			color: #ffffff;

		}
	}
</style>
